<template>
  <Form
    v-model:rules="rules"
    v-model:formList="formList"
    v-model:formData="formData"
    :config="config"
    @submitData="submit"
    btn-text="提交"
  />
</template>

<script lang="ts" setup>
// 提交按钮
const submit = (data:any) => {
  console.log(data)
}
/**
 * 一般horizontallyWidth设置后formList的span将失去作用,span默认24
 * horizontallyWidth:string 横向排列，每一项的宽度，建议用百分比，适配方便
 */
const config = {
  horizontallyWidth: 'width:31%'
}
/**
 * 表单数据
 */
const formData = ref({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})

/**
 * 表单项，如果表单项有增删要用ref()
  prop: string 对应formData中的key
  label: string 表单每项对应的名字
  type: string 类型
  placeholder: string
  style: string
  option?:option[] 单选和下拉才有
  importantStyle:string 强制行的宽度，覆盖config.horizontallyWidth的宽度
  checkBoxOption?:CheckBoxOption[] 复选才有
  span?: Number 决定输入框的宽度（栅格式）

  // 当type为select时，一下属性才有作用
  disabled?: Boolean 禁用下拉框
  multiple?: Boolean 是否多选
  collapseTags?: Boolean 多选是否合并
  isSearch：true?: Boolean 是否进行搜索筛选

  ==========当type===date时设置日历显示和value的格式
  format?: string 显示格式
  valueFormat?: string value的格式
  disabledTime 设置禁选时间
  DisabledTime{
    start?:string 最早时间
    during?: string[] 某些特定时间
    end?:string 最晚时间
  }
 */
const formList = ref([
  {
    prop: 'name',
    label: 'Activity name',
    type: 'input',
    placeholder: '',
    style: '',
    span: 8
  },
  {
    prop: 'region',
    label: 'Activity zone',
    type: 'select',
    placeholder: '',
    style: 'width:100%',
    disabled: false,
    multiple: false,
    collapseTags: false,
    isSearch: true,
    span: 8,
    option: [
      {
        label: 'Zone one',
        value: 'shanghai'
        // disabled: true
      },
      {
        label: 'Zone two',
        value: 'beijing'
      }
    ]
  },
  {
    prop: 'date',
    label: 'Activity time',
    type: 'date',
    placeholder: '',
    style: 'width: 100%',
    format: 'YYYY-MM-DD',
    valueFormat: 'YYYY-MM-DD',
    span: 8,
    disabledTime: {
      start: '',
      during: ['2022-03-14', '2022/03/13'],
      end: ''
    }
  },
  {
    prop: 'delivery',
    label: 'Instant delivery',
    type: 'switch',
    placeholder: '',
    style: '',
    span: 24
  },
  {
    prop: 'type',
    label: 'Activity type',
    type: 'checkbox',
    placeholder: '',
    style: '',
    span: 24,
    importantStyle: 'width:100%',
    checkBoxOption: [
      {
        label: 'Online activities',
        name: 'type'
      },
      {
        label: 'Promotion activities',
        name: 'type'
      },
      {
        label: 'Offline activities',
        name: 'type'
      },
      {
        label: 'Simple brand exposure',
        name: 'type'
      }
    ]
  },
  {
    prop: 'resource',
    label: 'Resources',
    type: 'radio',
    placeholder: '',
    style: '',
    span: 24,
    option: [
      {
        label: '单选1',
        value: 'Sponsorship'
      },
      {
        label: '单选2',
        value: 'Venue'
      }
    ]
  },
  {
    prop: 'desc',
    label: 'Activity form',
    type: 'textarea',
    placeholder: '',
    style: '',
    span: 24
  }
])

/**
 * 验证规则,如果表单项有增删,验证规则随之改变，要用ref()
 */
const rules = {
  // name: [
  //   {
  //     required: true,
  //     message: 'Please input Activity name',
  //     trigger: 'blur'
  //   },
  //   {
  //     min: 3,
  //     max: 5,
  //     message: 'Length should be 3 to 5',
  //     trigger: 'blur'
  //   }
  // ]
  // region: [
  //   {
  //     required: true,
  //     message: 'Please select Activity zone',
  //     trigger: 'change'
  //   }
  // ],
  // date: [
  //   {
  //     type: 'date',
  //     required: true,
  //     message: 'Please pick a date',
  //     trigger: 'change'
  //   }
  // ],
  // type: [
  //   {
  //     type: 'array',
  //     required: true,
  //     message: 'Please select at least one activity type',
  //     trigger: 'change'
  //   }
  // ],
  // resource: [
  //   {
  //     required: true,
  //     message: 'Please select activity resource',
  //     trigger: 'change'
  //   }
  // ],
  // desc: [
  //   {
  //     required: true,
  //     message: 'Please input activity form',
  //     trigger: 'blur'
  //   }
  // ]
}

watchEffect(() => {
  console.log(formList.value)
  console.log(formData.value)
})
</script>

<style lang="scss" scoped>

</style>
